{% extends "base.html" %}
{% load static %}

{% block title %}标签设计器{% endblock %}

{% block extra_css %}
<link href="{% static 'css/label-designer.css' %}" rel="stylesheet">
<style>
    .create-template-btn {
        margin-right: 10px;
    }
    .template-form-group {
        margin-bottom: 1rem;
    }
    .modal-dialog {
        max-width: 600px;
    }
    .template-form-group {
        margin-bottom: 1rem;
    }
    .modal-dialog {
        max-width: 600px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid p-0">
    <!-- 顶部工具栏 -->
    <div class="designer-toolbar d-flex justify-content-between align-items-center">
        <div>
            <h5 class="mb-0">
                <i class="fas fa-tags text-primary"></i>
                {% if template %}编辑标签模板: {{ template.name }}{% else %}标签模板管理{% endif %}
            </h5>
            <small class="text-muted">Brother PT-9500PC 标签打印机</small>
        </div>
        <div>
            <button class="btn btn-primary create-template-btn" data-bs-toggle="modal" data-bs-target="#createTemplateModal">
                <i class="fas fa-plus"></i> 新建模板
            </button>
            <button class="btn btn-outline-info" id="previewBtn" style="display: none;" onclick="previewLabel()">
                <i class="fas fa-eye"></i> 预览
            </button>
            <button class="btn btn-success" id="saveBtn" style="display: none;" onclick="saveTemplate()">
                <i class="fas fa-save"></i> 保存
            </button>
            <a href="{% url 'assets:label_template_list' %}" class="btn btn-outline-primary">
                <i class="fas fa-arrow-left"></i> 返回
            </a>
        </div>
    </div>

    <div class="designer-container">
        <!-- 左侧配置面板 -->
        <div class="designer-sidebar">
            <!-- 基本信息 -->
            <div class="config-section">
                <h6><i class="fas fa-info-circle"></i> 基本信息</h6>
                <div class="mb-3">
                    <label class="form-label">模板名称</label>
                    <input type="text" class="form-control" id="templateName" 
                           value="{% if template %}{{ template.name }}{% endif %}" placeholder="输入模板名称">
                </div>
                <div class="mb-3">
                    <label class="form-label">描述</label>
                    <textarea class="form-control" id="templateDescription" rows="2" 
                              placeholder="输入模板描述">{% if template %}{{ template.description }}{% endif %}</textarea>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="isPublic" 
                           {% if template and template.is_public %}checked{% endif %}>
                    <label class="form-check-label" for="isPublic">
                        公开模板
                    </label>
                </div>
            </div>

            <!-- 标签规格 -->
            <div class="config-section">
                <h6><i class="fas fa-ruler"></i> 标签规格</h6>
                <div class="mb-3">
                    <label class="form-label">标签尺寸</label>
                    <div class="label-size-selector" id="labelSizeSelector">
                        {% for size in label_sizes %}
                        <div class="size-option" data-size="{{ size.0 }}" 
                             {% if template and template.label_size == size.0 %}class="size-option selected"{% endif %}>
                            {{ size.1 }}
                        </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">打印机型号</label>
                    <select class="form-select" id="printerModel">
                        {% for model in printer_models %}
                        <option value="{{ model.0 }}" 
                                {% if template and template.printer_model == model.0 %}selected{% endif %}>
                            {{ model.1 }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <!-- 可用字段 -->
            <div class="config-section">
                <h6><i class="fas fa-list"></i> 可用字段</h6>
                <div class="field-list" id="availableFields">
                    <!-- 字段将通过JavaScript动态加载 -->
                </div>
            </div>

            <!-- 已选字段 -->
            <div class="config-section">
                <h6><i class="fas fa-check-square"></i> 已选字段</h6>
                <div class="selected-fields" id="selectedFields">
                    <div class="text-center text-muted py-3">
                        <i class="fas fa-mouse-pointer"></i>
                        <p class="mb-0">点击左侧字段添加到标签</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主要设计区域 -->
        <div class="designer-main">
            <div class="designer-canvas">
                <div class="label-preview">
                    <div class="preview-controls">
                        <button class="btn btn-sm btn-outline-primary" onclick="refreshPreview()">
                            <i class="fas fa-sync-alt"></i> 刷新预览
                        </button>
                        <div class="custom-data-input">
                            <label class="form-label">自定义文本:</label>
                            <input type="text" class="form-control form-control-sm" id="customText" 
                                   placeholder="输入自定义文本" onchange="refreshPreview()">
                        </div>
                    </div>
                    
                    <div class="label-canvas" id="labelCanvas">
                        <div class="size-indicator" id="sizeIndicator">24mm</div>
                        <div class="text-center text-muted py-5">
                            <i class="fas fa-tags fa-3x mb-3"></i>
                            <p>标签预览将在这里显示</p>
                            <small>选择字段并配置后可看到预览效果</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 字段配置模态框 -->
<div class="modal fade" id="fieldConfigModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">字段配置</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">字段名称</label>
                    <input type="text" class="form-control" id="fieldLabel" readonly>
                </div>
                <div class="mb-3">
                    <label class="form-label">显示标签</label>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="showLabel" checked>
                        <label class="form-check-label" for="showLabel">
                            在标签上显示字段名称
                        </label>
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">字体大小</label>
                    <select class="form-select" id="fontSize">
                        <option value="small">小</option>
                        <option value="medium" selected>中</option>
                        <option value="large">大</option>
                    </select>
                </div>
                <div class="mb-3" id="qrCodeConfig" style="display: none;">
                    <label class="form-label">二维码大小</label>
                    <select class="form-select" id="qrCodeSize">
                        <option value="small">小 (30x30)</option>
                        <option value="medium" selected>中 (50x50)</option>
                        <option value="large">大 (70x70)</option>
                    </select>
                </div>
                <div class="mb-3" id="barcodeConfig" style="display: none;">
                    <label class="form-label">条形码高度</label>
                    <select class="form-select" id="barcodeHeight">
                        <option value="small">小 (20px)</option>
                        <option value="medium" selected>中 (30px)</option>
                        <option value="large">大 (40px)</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="saveFieldConfig()">保存配置</button>
            </div>
        </div>
    </div>
</div>

<!-- 保存确认模态框 -->
<div class="modal fade" id="saveModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">保存模板</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>确定要保存这个标签模板吗？</p>
                <div id="saveValidationErrors" class="alert alert-danger" style="display: none;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="confirmSave()">确定保存</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

<!-- 创建模板模态框 -->
<div class="modal fade" id="createTemplateModal" tabindex="-1" aria-labelledby="createTemplateModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createTemplateModalLabel">创建新标签模板</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="createTemplateForm" method="post" action="{% url 'assets:label_template_create' %}">
                {% csrf_token %}
                <div class="modal-body">
                    <div id="templateFormErrors" class="alert alert-danger" style="display: none;"></div>
                    
                    <div class="template-form-group">
                        <label for="templateName" class="form-label">模板名称</label>
                        <input type="text" class="form-control" id="templateName" name="name" required>
                    </div>
                    
                    <div class="template-form-group">
                        <label for="templateDescription" class="form-label">描述</label>
                        <textarea class="form-control" id="templateDescription" name="description" rows="3"></textarea>
                    </div>
                    
                    <div class="template-form-group">
                        <label for="labelSize" class="form-label">标签尺寸</label>
                        <select class="form-select" id="labelSize" name="label_size" required>
                            {% for size in label_sizes %}
                                <option value="{{ size.0 }}">{{ size.1 }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <div class="template-form-group">
                        <label for="printerModel" class="form-label">打印机型号</label>
                        <select class="form-select" id="printerModel" name="printer_model" required>
                            {% for model in printer_models %}
                                <option value="{{ model.0 }}">{{ model.1 }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="isPublic" name="is_public">
                        <label class="form-check-label" for="isPublic">
                            设为公开模板
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">创建模板</button>
                </div>
            </form>
        </div>
    </div>
</div>

{% block extra_js %}
<script id="label-designer-boot" type="application/json">
  {
    "availableFields": {{ available_fields|safe }},
    "currentLabelSize": "{% if template %}{{ template.label_size }}{% else %}24mm{% endif %}",
    "template": {% if template %}{"id": {{ template.id }}, "fields_config": {{ template.fields_config|safe }}, "template_design": {{ template.template_design|safe }} }{% else %}null{% endif %}
  }
</script>

<!-- Load jQuery first -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Load Bootstrap JS bundle (includes Popper) -->
<script src="{% static 'vendor/bootstrap/bootstrap.bundle.min.js' %}"></script>

<!-- Load custom scripts -->
<script src="{% static 'js/labels_designer.js' %}"></script>
<script src="{% static 'js/label_template_creator.js' %}"></script>

<!-- Initialize components after scripts are loaded -->
<script>
$(document).ready(function() {
    // Initialize tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });

    // Initialize modals
    var modals = document.querySelectorAll('.modal');
    modals.forEach(function(modal) {
        if (!bootstrap.Modal.getInstance(modal)) {
            new bootstrap.Modal(modal);
        }
    });

    // Initialize any other Bootstrap components as needed
});
</script>
{% endblock %}